<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item label="商品类型搜索:" extra style=" font-size:16px;">
          <el-input v-model.trim="formInline.className" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="openDialog('新增')"
        >新建</el-button>
        <!-- table表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          class="table_top"
        >
          <el-table-column prop="index" label="序号" width="80px" />
          <el-table-column prop="className" label="商品类型名称" min-width="300px" />
          <el-table-column prop="address" label="操作" width="120px">
            <template #default="{row}">
              <el-button type="text" class="button-left" @click="openDialog('修改' , row)">修改</el-button>
              <el-button type="text" class="button-right" @click="remove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div v-if="totalPage !== '1'" class="foot">
          <p>共{{ totalCount }}条记录 第 {{ pageIndex }} / {{ totalPage }} 页</p>
          <div class="foot_button">
            <el-button
              type="info"
              :disabled="formInline.pageIndex === 1"
              :class="{'foot_button_foot' : true , 'isgrey' :formInline.pageIndex === 1}"
              @click="previous"
            >上一页</el-button>
            <el-button
              type="info"
              :disabled="pageIndex === totalPage"
              :class="{'foot_button_foot' : true , 'isgrey' :pageIndex === totalPage}"
              @click="next"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title=" type + '商品类型'"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="商品类型名称:" prop="className">
          <el-input v-model="form.className" placeholder="请输入内容" style="width:400px" maxlength="10" show-word-limit />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCommodityList, addList, removeList, updateList } from '@/api/commodity'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      formInline: {
        pageIndex: 1,
        pageSize: 10,
        className: null
      },
      form: {
        className: null
      },
      rules: {
        className: [{ required: true, message: '请输入商品类型名称', trigger: 'blur' }]
      },
      pageIndex: null,
      totalCount: null,
      tableData: null,
      totalPage: null,
      dialogVisible: false,
      fileDialog: false,
      type: null,
      dialogID: null,
      loading: false
    }
  },
  created() {
    this.renderList()
  },
  methods: {
    onSubmit() {
      this.renderList()
    },
    async  renderList() {
      this.loading = true
      const data = await getCommodityList(this.formInline)
      this.totalCount = data.totalCount
      this.tableData = data.currentPageRecords
      let num = 0
      this.tableData.forEach(item => {
        num++
        item.index = (data.pageIndex - 1) * 10 + num
      })
      this.totalPage = data.totalPage
      this.pageIndex = data.pageIndex
      this.loading = false
    },
    next() {
      this.formInline.pageIndex += 1
      if (this.formInline.pageIndex > this.totalPage) {
        this.formInline.pageIndex = this.totalPage
      }
      this.renderList()
    },
    previous() {
      this.formInline.pageIndex -= 1
      if (this.formInline.pageIndex < 1) {
        this.formInline.pageIndex = 1
      }
      this.renderList()
    },
    openDialog(type, row) {
      if (type === '修改') {
        this.form.className = row.className
        this.dialogID = row.classId
      }
      this.type = type
      this.row = row
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    async addList() {
      await this.$refs.form.validate()
      try {
        if (this.type === '修改') {
          await updateList({ classId: this.dialogID, className: this.form.className })
        } else {
          await addList(this.form)
        }
        this.$refs.form.resetFields()
        this.dialogVisible = false
        this.renderList()
        this.$message({
          type: 'success',
          message: `${this.type}成功`,
          offset: 60
        })
      } catch (error) {
        this.$message({
          message: '操作错误',
          offset: 60,
          type: 'error'
        })
      }
    },
    async remove(row) {
      if (this.tableData.length === 1) {
        this.formInline.pageIndex -= 1
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await removeList(row)
        this.renderList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding: 20px ;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .table_top {
      margin-top: 15px;
      border-radius: 5px;
     .button-left {
        color: #5f92fe;
     }
     .button-right {
        color: #ff5a5a;
     }
    }
     .foot {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #edf0f9;
          color: #d8dde3;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
  }
  }

}
  ::v-deep .el-dialog{
    border-radius: 10px;
  }
.isgrey { background-color: #edf0f9 !important; color: #d8dde6 !important;}
</style>
